<template>
  <div class="applyDiv">
    <index-login @complete="complete" v-if="isNeedLogin"></index-login>
    <div class="applyState" v-if="applyState">
      <h3>审核状态：{{stateTxt}}</h3>
      <p>原因：{{stateReason}}</p>
    </div>
    <ul>
      <li>
        <span>姓名：</span>
        <div>
          <input type="text" placeholder="请输入您的姓名" v-model="name">
        </div>
      </li>
      <li>
        <span>身份证号码：</span>
        <div>
          <input type="text" placeholder="请输入您本人身份证号码" v-model="idNum">
        </div>
      </li>
      <li>
        <span>电话：</span>
        <div>
          <input type="number" placeholder="请输入您的电话" v-model="mobile">
        </div>
      </li>
      <!-- <li>
        <span>银行卡号：</span>
        <div>
          <input type="number" placeholder="请输入您的银行卡号" v-model="bankCardNum">
        </div>
      </li>
      <li>
        <span>开户行</span>
        <div>
          <picker @change="bindRegionChange" :range="allbank">
            <view class="picker">
              {{changeregion}}
            </view>
          </picker>
        </div>
      </li>
      <li>
        <span>持卡人姓名</span>
        <div>
          <input type="text" placeholder="请输入持卡人姓名" v-model="holdCardName">
        </div>
      </li>
      <li>
        <span>邮箱</span>
        <div>
          <input type="email" placeholder="请输入您的邮箱" v-model="email">
        </div>
      </li> -->
    </ul>
    <div class="applyBtn" @click="apply" v-if="isSubmit">提交</div>
    <div class="applyBtn applyBtnNo" @click="noApply" v-if="!isSubmit">提交</div>
    <apply-alert @cancelopenpage="cancelopenpage" v-if="isShowSuccess"></apply-alert>
  </div>
</template>
<script>
import indexLogin from '@/components/dialog/index-login'
import applyAlert from './applyalert.vue'
  export default {
    components:{
      applyAlert,indexLogin
    },
    data(){  
      return {
        name: '',
        idNum:'',
        mobile: '',
        bankCardNum:'',
        holdCardName:'',
        email: '',
        bankSelectIndex: null,//这是选择的第几个
        bankList: [],//获取到接口所有开户行的集合
        allbank: [],//所有的开户行
        applyState: false, //审核状态
        stateTxt: '',//状态
        stateReason: '',//原因
        isSubmit:'',//是否能提交
        isShowSuccess: false,//是否显示成功提示
        isNeedLogin: false,//是否显示登录的组件
      }
    },
    onShareAppMessage: (res) => {//分享给朋友
      if (res.from === 'button') {
        console.log("来自页面内转发按钮");
      }
      else {
        console.log("来自右上角转发菜单")
      }
      return {
        title: '申请堂主',
        path: `/pages/user-applyagent/main?notMe=true`,
        imageUrl: "",
        success: (res) => {
          console.log("转发成功", res);
        },
        fail: (res) => {
          console.log("转发失败", res);
        }
      }
    },
    computed:{
      changeregion() {
        if(this.bankSelectIndex&&this.bankList){
          return this.bankList[this.bankSelectIndex].name
        }else if(this.bankSelectIndex == 0&&this.bankList){
          return this.bankList[this.bankSelectIndex].name
        }else{
          return '请选择开户行'
        }
      },
      openBank(){
        if(this.bankSelectIndex&&this.bankList){
          return this.bankList[this.bankSelectIndex].id
        }else{
          return null
        }
      },
    },
    onLoad(option){
      console.log(option)
      if(option.notMe){ //这是被转发者进入的，需要登录
        console.log("需要登录")
        this.isNeedLogin = true
        wx.setStorageSync("isNeedLogin",true)
      }else{
        console.log("不需要登录")
        this.isNeedLogin = false
      } 
    },
    onShow(){
      if(this.isNeedLogin){ //需要登录授权

      }else{ //不需要登录授权
        console.log("我是没有走的complete")
        this.getApplyDate()//获取进入状态
        // this.getBank()//获取银行信息
      }
      this.isShowSuccess = false
    },
    methods:{
      complete(){
        console.log("我是走的complete")
        this.getApplyDate()//获取进入状态
        this.getBank()//获取银行信息
      },
      cancelopenpage(){
        this.isShowSuccess = false
      },
      bindRegionChange (e){ //value改变时候触发
        this.bankSelectIndex = e.mp.detail.value
      },
      // getBank(){
      //   this.$http.get('agent/findByBank','','',false).then((res)=>{ 
      //     this.bankList = res.data.data; 
      //     res.data.data.map((item) => {
      //       this.allbank.push(item.name)
      //     })
      //   })
      // },
      getApplyDate(){
        this.$http.get('agent/findByAgentInfo','','',false).then((res)=>{ 
          wx.hideLoading()  
          if(res.data.code === 26){//新用户进来的初始化
            this.isSubmit = true //用户可点击提交
            this.applyState = false //上面的状态栏隐藏
            this.name = ""
            this.idNum = ""
            this.mobile = ""
            this.bankCardNum = ""
            this.openBank = null
            this.holdCardName = ""
            this.email = ""
          }else if(res.data.code === 0){ //已经成为合伙人，不能再申请
            this.wxAlert('你已经是堂主了额~')
            setTimeout(() => {
              const url ='../user-applyagent-success/main'
              wx.redirectTo({ url })
            }, 2000);
          }else if(res.data.code === 9){//回填数据
            if(res.data.data.isSuccess == "待审核" ){
              this.isSubmit = false //用户不可点击提交
              this.applyState = true //上面的状态栏隐藏
            }else if(res.data.data.isSuccess == "失败"){
              this.isSubmit = true //用户可点击提交
              this.applyState = true //上面的状态栏隐藏
            }
            this.stateTxt = res.data.data.isSuccess
            this.stateReason = res.data.data.content
            this.name = res.data.data.name
            this.idNum = res.data.data.idNum
            this.mobile = res.data.data.mobile
            this.bankCardNum = res.data.data.bankCardNum
            this.bankSelectIndex = res.data.data.openBank-1
            this.holdCardName = res.data.data.holdCardName
            this.email = res.data.data.email
          }     
        })
      },
      apply(){
        if (!this._validateAddress()) {
          return
        }
        let selectIndex = parseInt(this.bankSelectIndex) + 1
        console.log(selectIndex)
        let userAgent = {
          "name": this.name,
          "idNum": this.idNum,
          "mobile": this.mobile,
          // "bankCardNum": this.bankCardNum,
          // "openBank": selectIndex,
          // "holdCardName": this.holdCardName,
          // "email": this.email,
        }
        this.$http.post(`agent/application`,userAgent ,'application/json').then((res)=>{
          if(res.data.code === 0){//申请成功
            //这里应该弹框弹出来
            this.isShowSuccess = true
          }
        })
      },
      noApply(){
        this.wxAlert('审核中，请耐心等待')
      },
      _validateAddress() {
        if (this.name === '' || this.name === undefined) {
          this.wxAlert('请输入您的姓名')
          return false
        }
        if (this.idNum === '' || this.idNum === undefined) {
          this.wxAlert('请输入您本人身份证号码')
          return false
        }
        if (this.mobile === '' || this.mobile === undefined) {
          this.wxAlert('请输入您的电话')
          return false
        }
        // if (this.bankCardNum === '' || this.bankCardNum === undefined) {
        //   this.wxAlert('请输入您的银行卡号')
        //   return false
        // }
        // if (this.bankSelectIndex === '' || this.bankSelectIndex === undefined) {
        //   this.wxAlert('请选择开户行')
        //   return false
        // }
        // if (this.holdCardName === '' || this.holdCardName === undefined) {
        //   this.wxAlert('请输入持卡人姓名')
        //   return false
        // }
        // if (this.email === '' || this.email === undefined) {
        //   this.wxAlert('请输入您的邮箱')
        //   return false
        // }
        return true
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    },
  }
</script>

<style scoped>
img{
  width: 100%;
  height: 100%;
  display: block;
}
.applyDiv{
  background: #efeff4;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.applyState{
  background: #fff;
  margin: 24rpx;
  padding: 30rpx;
  border-radius: 20rpx;
}
.applyState h3{
  font-size: 32rpx;
  color: #2a2a2a;
  margin-bottom: 10rpx;
}
.applyState p{
  font-size: 30rpx;
  color: #939393;
}
.applyDiv ul{
  background: #fff;
  margin: 24rpx;
  padding: 0 30rpx;
  border-radius:20rpx;
}
.applyDiv ul li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #2a2a2a;
  height: 110rpx;
  border-bottom: 1px solid #EFEFF4;
}
.applyDiv ul li>div{
  display: flex;
  align-items: center;
  width: 365rpx;
  margin-left: 10rpx;
}
.applyDiv ul li>div input,.applyDiv ul li>div picker{
  text-align: left;
  width: 100%;
  height: 100%;
}
.applyBtn{
  margin: 60rpx 24rpx 0;
  height:88rpx;
  background:#E1C7D2;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #fff;
}
.applyBtnNo{
  background: #d8d8d8;
}
</style>
